<template>
  <el-dialog v-model="isSetting" title="设 置" :width="settingDialogWidth">
    <el-tabs v-model="tabsType" class="demo-tabs" @tab-click="handleChange">
      <el-tab-pane
        :label="item.label"
        :name="item.prop"
        v-for="item in tabsOption.column"
        :key="item.prop"
      ></el-tab-pane>
    </el-tabs>
    <div class="setting-content">
      <div class="basic-content" v-if="tabsType === 1">
        <div class="basic-title">
          开启“定时随访提醒”功能需在“量表通知”中设置需提醒的量表，只有设置通知的量表进行短信及微信提醒。其中发送链接的量表会发送链接给被试，被试者可通过链接进行线上提交；设置了通知就诊的量表会提醒被试前往医院就诊；可自定义内容进行发送。
        </div>
        <div class="alert-radio">
          <span
            >定时随访提醒
            <el-tooltip
              class="box-item"
              effect="dark"
              placement="bottom"
              content="<span>定时提醒：默认为关，选择“开”后，在量表采</span><br/><span>集时间开始前对于设置通知的量表会通过短信</span><br/><span>和微信的形式向患者发送通知，提醒其进行临</span><br/><span>床数据录入，可根据门诊情况设置消息发送的</span><br/><span>提前天数和短信内容，对于发送链接的量表系</span><br/><span>统会发送对应的链接，患者在家可完成临床数</span><br/><span>据录入，此方法方便于需要定期随访的临床项</span><br/><span>目开展。</span>"
              raw-content
            >
              <InfoFilled style="width: 16px; height: 16px; margin: 0 5px" />
            </el-tooltip>
          </span>
          <el-radio-group v-model="settingRadio">
            <el-radio value="1" border>开</el-radio>
            <el-radio value="2" border>关</el-radio>
          </el-radio-group>
        </div>
        <avue-form
          style="margin-top: 10px"
          :option="openOption"
          v-model="openForm"
          v-if="settingRadio === '1'"
        >
          <template #TZ-label="{}">
            <span style="font-size: 13px"
              >通知患者就诊同时通知医生
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom"
                content="<span>开启“定时提醒”功能后，系统对设置通知就诊</span><br/><span>的量表会通过短信和微信的形式向患者发送通</span><br/><span>知，如想同时提醒医生有患者前来，可在此处</span><br/><span>进行设置。</span>"
                raw-content
              >
                <InfoFilled style="width: 12px; height: 12px" />
              </el-tooltip>
            </span>
          </template>
          <template #TS-label="{}">
            <span style="font-size: 13px"
              >通知就诊提前天数
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom"
                content="<span>开启“定时提醒”功能后，系统默认会提前1天</span><br/><span>对设置通知就诊的量表进行通知提醒，可在此</span><br/><span>处对提前天数进行修改</span>"
                raw-content
              >
                <InfoFilled style="width: 12px; height: 12px" />
              </el-tooltip>
            </span>
          </template>
          <template #JZNR-label="{}">
            <span style="font-size: 13px"
              >通知就诊自定义短信内容
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom"
                content="<span>开启“定时提醒”功能后，在量表采集时间开始</span><br/><span>前对于设置通知就诊的量表会通过短信和微信</span><br/><span>的形式向患者发送通知，此处可自定义量表触</span><br/><span>发通知时的发送内容</span>"
                raw-content
              >
                <InfoFilled style="width: 12px; height: 12px" />
              </el-tooltip>
            </span>
          </template>
          <template #DXNR-label="{}">
            <span style="font-size: 13px"
              >发送链接自定义短信内容
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom"
                content="<span>开启“定时提醒”功能后，在量表采集时间开始</span><br/><span>前对于设置通知就诊的量表会通过短信和微信</span><br/><span>的形式向患者发送通知，此处可自定义患者填</span><br/><span>量表触发通知时的发送内容</span>"
                raw-content
              >
                <InfoFilled style="width: 12px; height: 12px" />
              </el-tooltip>
            </span>
          </template>
        </avue-form>
      </div>
      <div class="scale-content" v-if="tabsType === 2">
        <div class="scale-header">
          使用方式：1.选择分组-->2.选择阶段-->3.选择CRF-->4.设置是否发送通知
        </div>
        <div class="scale-main">
          <div class="group-content">
            <span class="c-title">1.分 组</span>
            <div class="group-list">
              <div
                class="group-list-line"
                v-for="(item, index) in groupList"
                :key="item.id"
                @click="handleGroupName(item)"
                :style="{
                  backgroundColor: groupLineValue.id === item.id ? '#428bca' : '',
                  color: groupLineValue.id === item.id ? '#fff' : '',
                  borderBottom: index === 0 ? 'none' : '1px solid #dddddd',
                }"
              >
                <Memo style="width: 16px; height: 16px; margin-right: 2px; margin-left: 20px" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="enter-group-content">
            <span class="c-title">2.入组阶段</span>
            <div class="enter-group-list">
              <div
                class="enter-group-list-line"
                v-for="(item, index) in enterGroupList"
                :key="item.id"
                @click="handleEnterGroupName(item)"
                :style="{
                  backgroundColor: enterGroupLineValue.id === item.id ? '#428bca' : '',
                  color: enterGroupLineValue.id === item.id ? '#fff' : '',
                  borderBottom: index === 0 ? 'none' : '1px solid #dddddd',
                }"
              >
                <Memo style="width: 16px; height: 16px; margin-right: 2px; margin-left: 20px" />
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
          <div class="crf-content">
            <span class="c-title">3.CRF</span>
            <avue-crud
              :data="crfData"
              :option="crfOption"
              :table-loading="tableLoading"
              v-model:page="page"
              @current-change="currentChange"
              @size-change="sizeChange"
            >
              <template #FSLJ-header="{}">
                <span>发送链接</span><br />
                <span style="color: #cccccc">（点击设置）</span>
              </template>
              <template #TZJZ-header="{}">
                <span>通知就诊</span><br />
                <span style="color: #cccccc">（点击设置）</span>
              </template>
              <template #FSLJ="{ row }">
                <MuteNotification
                  style="width: 16px; height: 16px; color: #cccccc; cursor: pointer"
                  @click="handleCrfTableSet(1, row)"
                  v-if="cutSend"
                />
                <Bell
                  style="width: 16px; height: 16px; color: #cccccc; cursor: pointer"
                  @click="handleCrfTableSet(1, row)"
                  v-else
                />
              </template>
              <template #TZJZ="{ row }">
                <MuteNotification
                  style="width: 16px; height: 16px; color: #cccccc; cursor: pointer"
                  @click="handleCrfTableSet(2, row)"
                  v-if="cutInform"
                />
                <Bell
                  style="width: 16px; height: 16px; color: #cccccc; cursor: pointer"
                  @click="handleCrfTableSet(2, row)"
                  v-else
                />
              </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isSetting = false">取 消</el-button>
        <el-button type="primary" @click="handleSettingSubmit"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { groupListOfTrial } from '@/api/trial/trial';
import { treeWithCrf, addToProcessLibrary, processLibraryTreeWithCrf } from '@/api/group/group';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const routerQuery = ref({});
routerQuery.value = route.query;
let isSetting = ref(false);
const tabsOption = ref({
  column: [
    {
      // icon: 'el-icon-info',
      label: '基本配置',
      prop: 1,
    },
    {
      label: '量表通知',
      prop: 2,
    },
  ],
});
let openOption = ref({
  submitBtn: false,
  emptyBtn: false,
  labelWidth: 190,
  labelPosition: 'right',
  column: [
    {
      label: '空心单选',
      prop: 'TZ',
      type: 'radio',
      border: true,
      dicData: [
        { label: '开', value: '1' },
        { label: '关', value: '2' },
      ],
      span: 24,
    },
    {
      label: '通知就诊提前天数',
      prop: 'TS',
      type: 'input',
      span: 24,
    },
    {
      label: '通知就诊提前天数',
      prop: 'JZNR',
      type: 'textarea',
      minRows: 3,
      maxRows: 5,
      span: 24,
    },
    {
      label: '通知就诊提前天数',
      prop: 'DXNR',
      type: 'textarea',
      minRows: 3,
      maxRows: 5,
      span: 24,
    },
  ],
});
let openForm = ref({});
let tabsType = ref(1);
let settingRadio = ref('2');
let settingDialogWidth = ref(650);
let groupList = ref([]);
let enterGroupList = ref([]);
let crfOption = ref({
  index: false,
  height: 'auto',
  calcHeight: 330,
  // maxHeight: 300,
  selection: false,
  addBtn: false,
  editBtn: false,
  viewBtn: false,
  delBtn: false,
  menu: false,
  align: 'center',
  searchShowBtn: false,
  refreshBtn: false,
  gridBtn: false,
  columnBtn: false,
  column: [
    {
      label: '模版名称',
      prop: 'crfName',
      type: 'input',
      overHidden: true,
    },
    {
      label: '评价方式',
      prop: 'PJFS',
      type: 'input',
      overHidden: true,
    },
    {
      label: '发送链接',
      prop: 'FSLJ',
      type: 'input',
      overHidden: true,
      slot: true,
    },
    {
      label: '通知就诊',
      prop: 'TZJZ',
      type: 'input',
      overHidden: true,
      slot: true,
    },
  ],
});
let tableLoading = ref(false);
let crfData = ref([]);
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 4,
});
let groupLineValue = ref({});
let enterGroupLineValue = ref({});
let cutSend = ref(true);
let cutInform = ref(true);
const handleChange = val => {
  console.log(val);
  tabsType.value = val.props.name;
  settingDialogWidth.value = tabsType.value === 1 ? 650 : 1200;
  if(tabsType.value === 2){
    initData();
  }
};
const initData = () => {
  // 各分组
  groupListOfTrial(routerQuery.value.trialId).then(res => {
    groupList.value = res.data.data;
    groupLineValue.value = groupList.value[0];
    // CRF阶段接口方法---默认显示第一个分组的CRF阶段
    initTreeWithCrf(groupList.value[0].id);
  });
};
const initTreeWithCrf = groupId => {
  treeWithCrf(groupId).then(res => {
    enterGroupList.value = res.data.data;
    enterGroupLineValue.value = enterGroupList.value[0];
    // 默认赋值第一个CRF阶段的CRF
    crfData.value = res.data.data[0].crfList;
  });
};
// 分组选择---每一项点击事件
const handleGroupName = item => {
  groupLineValue.value = item;
  initTreeWithCrf(item.id);
};
// 阶段选择---每一项点击事件
const handleEnterGroupName = item => {
  enterGroupLineValue.value = item;
  crfData.value = item.crfList;
};
/* 
  type:1 发送链接  2 通知就诊
*/
const handleCrfTableSet = (type, row) => {
  switch (type) {
    case 1:
      cutSend.value = !cutSend.value;
      break;
    case 2:
      cutInform.value = !cutInform.value;
      break;
  }
};
const handleSettingSubmit = () => {};
const currentChange = currentPage => {
  page.value.currentPage = currentPage;
  // TabRefreshChange();
};
const sizeChange = pageSize => {
  page.value.pageSize = pageSize;
  // TabRefreshChange();
};
const onLoad = (page, params = {}) => {
  loading.value = true;

  const { name, lbType } = query.value;

  let values = {
    name_: name,
    lbType_: lbType,
    descs: 'create_time',
    shareType: params.shareType || 1,
    ...params,
  };

  getList(page.currentPage, page.pageSize, values).then(res => {
    const DATA = res.data.data;
    page.total = DATA.total;
    data.value = DATA.records;
    data.value.forEach(item => {
      item.isShareSelect = 3;
      if (item.publicShare == '1') {
        item.isShareBtn = '0';
        item.isShareSelect = 1;
      } else if (item.deptShare == '1') {
        item.isShareBtn = '6';
        item.isShareSelect = 2;
      }
    });
    loading.value = false;
    selectionClear();
  });
};
// 打开弹窗
const openSetting = () => {
  isSetting.value = true;
  tabsType.value = 1;
  settingRadio.value = '2';
  settingDialogWidth.value = 650;
  for (const key in groupLineValue.value) {
    groupLineValue.value[key] = '';
  }
  for (const key in enterGroupLineValue.value) {
    enterGroupLineValue.value[key] = '';
  }
};
onMounted(() => {});
defineExpose({
  openSetting,
});
</script>
<style scoped lang="scss">
.basic-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.basic-title {
  width: 75%;
  height: auto;
  color: black;
  margin-bottom: 20px;
  /* font-weight: 550; */
}
.alert-radio {
  width: 75%;
  height: auto;
  color: black;
  /* font-weight: 550; */
}
.scale-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.scale-header {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  color: #0000ff;
}
.scale-main {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}
.group-content,
.enter-group-content {
  width: 29%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.c-title {
  font-size: 14px;
  color: black;
  font-weight: 550;
  margin-bottom: 5px;
}
.group-list {
  width: 100%;
  height: 420px;
  color: #428bca;
  overflow-y: auto;
  overflow-x: hidden;
}
.group-list-line {
  width: 99%;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #dddddd;
  cursor: pointer;
}
.enter-group-list {
  width: 100%;
  height: 420px;
  color: #00bb00;
  overflow-y: auto;
  overflow-x: hidden;
}
.enter-group-list-line {
  width: 99%;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #dddddd;
  cursor: pointer;
}
.crf-content {
  width: 40%;
  height: auto;
  ::v-deep .avue-crud__header {
    display: none;
  }
}
</style>